<template>
  <el-card style="width: 250px; height: 200px">
    <!-- 时间 -->
    <div class="time">
      <!-- 月份 -->
      <div class="time-date"><h5>一</h5><h5>月</h5></div>
      <div><h1 style="font-size: 80px;">20</h1></div>
      <div class="time-date"><h5>星</h5><h5>期</h5><h5>日</h5></div>
    </div>
    <!-- 签到按钮 -->
    <div class="time-option">
      <el-button type="success">签到</el-button>
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'home-sign-in-card'
}
</script>

<style scoped>
.time {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.time-date{
  display: flex;
  flex-direction: column;
}
.time-date>h5{
  color: #567722;
  font-size: 22px;
}
.time-option{
  /*background-color: #42b983;*/
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-option>.el-button{
  width: 100%;
}
</style>
